﻿/* CSS Document */
body { height: 100%; font-size: 0.85em; }
html, body, #header { margin: 0px; padding: 0px; }
a { cursor: pointer;}
.clear { clear:both; }
.invisible { display: none !important; }
div { display: block;}
#web-body { padding: 15px; }
#container { width: 960px; margin: 0px auto; position: relative; z-index: 1; border: 1px transparent solid; }
#error-warning { padding: 0px 10px; margin: 0px; background-color: White; color: Red;}
#header, #menu { position: relative; display: block;}
#menu { background-color: #464646; font-size: 0.9em; overflow: visible; border: 1px #464646 solid;}
#menu a { color: #DDD; text-decoration: none; float: left; padding: 3px 10px; font-size: 0.9em; }
#menu a .dropdown-link-image { background-image: url(images/dropdown_icon.png);width: 15px;height: 15px;display: block;float: left; margin: 0 3px 0 0;}
#menu a:hover { background-color: #565656; color: #EBD740;}
#menu a:hover .dropdown-link-image{ background-position: 15px 0px; }
#menu #search { float: left; background-color: white; margin: 1px 1px 1px 100px; padding: 1px;}
#menu #search input { font-size: 0.9em; border: 0px; float: left;}
#menu #search .button { background-image:url(images/search.gif); background-repeat: no-repeat; text-indent: -999; width: 20px; height: 20px; margin: 0px; padding: 0px;}
#menu #search .inactive { font-style:italic; color: #333;}
#menu #search .active { color: black; font-style: normal; border: 0px; outline: none;}
#menu #address { float: right;}
#menu #show-advance { float: right;}
#menu #friend-request, #menu #message, #menu #notification { padding: 10px; min-height: 50px; background-color: #464646; border-bottom: 5px solid #CCC; position: absolute; top: 23px; left:0px; z-index: 300; width: 300px; color: #DDD; font-family: "Segoe UI Light", "Segoe UI", Tahoma, Arial, Verdana, sans-serif;  display: none;}
#menu #message { left: 60px; }
#menu #notification { left: 120px;}
#menu #advance { height: 250px; background-color: #464646; border-bottom: 5px solid #CCC; position: absolute; top: 23px; left: 0px; z-index: 300; width: 100%; display: none; color: #DDD; font-size: 1.2em; font-family: "Segoe UI Light", "Segoe UI", Tahoma, Arial, Verdana, sans-serif;}
#menu #advance a:hover { background-color: #464646;}
#menu #advance .title { font-size: 1.8em; font-family: "Segoe UI Light", "Segoe UI", Tahoma, Arial, Verdana, sans-serif; font-weight: normal; margin: 0px 0px 15px 0px;}
#menu #advance #advance-left { padding: 0px 10px; border-right: 1px solid #BBB; width: 660px; margin: 20px 10px; height: 200px; float: left;}
#menu #advance #advance-left .link-item { height: 50px; margin: 5px 10px 5px 0px; padding: 15px 0px 0px 60px; font-size: 1.5em; background-repeat: no-repeat; background-position: 5px 5px; width: 150px; cursor: pointer; float: left;}
#menu #advance #advance-left .link-item:hover { background-color: Silver; color: #464646 !important;}
#menu #advance #advance-left #change-layout { background-image: url("Images/layout.png");}
#menu #advance #advance-left #change-theme { background-image: url("Images/theme.png");}
#menu #advance #advance-left #change-module { background-image: url("Images/module.png");}
#menu #advance #advance-left #advance-search { background-image: url("Images/search.png");}
#menu #advance #advance-left #change-category { background-image: url("Images/category.png");}
#menu #advance #advance-left #change-album { background-image: url("Images/album.png");}
#menu #advance #advance-right { margin: 20px 10px; position: relative; width: 180px; float: left;}
#menu #advance #advance-right .link-item { font-size: 1.2em; margin: 5px -5px; display: block;}
#menu #advance-content { padding: 20px; position: relative;}
#header { position: relative; min-height: 150px; margin: 0px 0px 15px 0px;}
#header #head-image { width: 100%; height: 250px; background-repeat: no-repeat; }
#header #info { padding-bottom: 10px;}
#header #info img { height: 120px; width: 120px; position: absolute; bottom: 10px; left: 10px; padding: 2px; }
#header #info h1 { padding-left: 150px; font-size: 2.8em; font-weight: normal; margin: 0px;}
#header #info h3 { padding-left: 150px; font-weight: normal; margin: 0px; font-size: 1.2em;}
#header #toolbar { position: absolute; bottom: 10px; right: 10px; }
#header #toolbar #upload-photo, #header #toolbar #write-entry  { width: 30px; height: 30px; float: left; margin-left: 10px; cursor: pointer; border: 1px solid Transparent; padding: 2px; background-repeat: no-repeat; background-position: 2px 2px; }
#header #toolbar #upload-photo:hover, #header #toolbar #write-entry:hover { border: 1px solid Silver; }
#header #toolbar #upload-photo { background-image: url("Images/Photo.png"); }
#header #toolbar #write-entry { background-image: url("Images/Entry.png"); }
#main-content { margin-bottom: 15px; }
#main-content .place-holder { height: 20px; background-color: Silver; margin-bottom: 15px; }
#main-content #col-1, #main-content #col-2, #main-content #col-main { min-height: 50px; }
#main-content .sort { cursor: move; }
#footer { background-color: #464646; text-align: center; color: #FFF; padding: 6px 15px; font-size: 0.8em; border: 1px #464646 solid;}
#footer p { margin: 3px;}
#login-frame { background-color: #464646; height: 60px; border: 1px solid #464646; margin-bottom: 15px; padding: 10px; color: #DDD; }
#login-frame .title { font-size: 2.8em; font-family: "Segoe UI Light", "Segoe UI", Tahoma, Arial, Verdana, sans-serif; font-weight: normal; font-weight: bold; float: left;}
#login-frame #login-form { float: right; font-size: 0.9em;}
#login-frame #login-form .transparent { color: #BBB; }
#login-frame #login-form a { text-decoration: none; display: block; padding-top: 3px;}
#login-frame #login-form a:hover { text-decoration: underline; color: #DDD; }
#login-frame #login-form .col { width: 170px; float: left;}
#login-frame #login-form #login-button { background-color: #BBB; color: #464646; font-weight: bold; padding: 5px; float: left; cursor: pointer; margin-top: 15px;}
#login-frame #login-form #login-button:hover { background-color: #AAA; }
#register-frame { height: 440px; border: solid 1px Silver; background-color: White; padding: 0px 30px; position: relative;}
#register-frame .col ,.notice { width: 440px; float: left;}
#register-frame .col input ,.notice { float: left; margin: 10px 0px;}
#register-frame .col select { float: left; margin: 10px 0px; width: 275px;}
#register-frame .col .label,.capcha { display: block; width: 120px; float: left; margin: 10px 0px;}
#register-frame #register-button { background-color: #FEF7D8; border: #F2A322 1px solid; color: Black; padding: 10px 30px; float: left; cursor: pointer; margin-left: 420px; font-size: 1.2em;}
#register-frame #register-button:hover { background-color: #FFFAE5;}
#register-frame .col .check{display:block; float: left;width:40px; margin: 14px 0px;color:Red;}
.capcha, .notice{color:Red;font-size:15px;text-align:center;}
#frmUpload {height: 400px; width:500px;margin:15px auto; border: solid 1px Silver; background-color: White; padding: 10px 30px; position: relative;}
#frmUpload #container-upload {margin:10px auto;width:440px;}
#frmUpload #container-upload .col ,.notice {width:440px; float:left;margin:10px auto;}
#frmUpload #container-upload .col input{float: left; margin: 5px 0px;}
#frmUpload #container-upload .col select { float: left; margin: 10px 0px; width: 180px;}
#frmUpload #container-upload .title {border-radius:10px;-moz-border-radius:15px;background:#CCCFFF;width:440px;margin:margin:10px auto;text-align:center; font-size: 2.8em; font-family: "Segoe UI Light", "Segoe UI", Tahoma, Arial, Verdana, sans-serif; font-weight: bold;}
#frmUpload #container-upload .col .label {font-size:15;display: block; width: 120px; float: left; margin: 10px 0px;height: 17px;}
#frmUpload .check{display:block; float: left;width:10px; margin: 10px 0px;color:Red;}

.capcha, .notice{color:Red;font-size:15px;text-align:center;}


#register-frame #register-button:hover { background-color: #FFFAE5;}
.loading { width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; background-image: url("Images/Loading.gif"); }
.dialog { position: relative; }
.value { display: none; }
#sortable { list-style:none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 3px 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
.selectable .ui-selecting { background: #FECA40; }
.selectable .ui-selected { background: #FECA40; }
.selectable { list-style-type: none; margin: 0; padding: 0; }
/*#selectable li { margin: 3px; padding: 0.4em; height: 18px; }*/
.img-item { width: 190px; display: block; padding: 5px; text-align: center; float: left; margin: 10px; cursor: pointer; }
.img-item .info { background-color: White; height: 180px; border: 1px solid Silver;}
.img-item .img-layout { width: 185px; height: 135px; }
.img-item .img-theme { width: 128px; height: 128px; }
.module { margin-bottom: 15px; position: relative; background-color: White; }
.module a { text-decoration: none; }
.module .title { font-size: 1.8em; font-weight: normal; padding: 5px 10px; }
.module .title .select-list hr { margin-top: 2px; }
.module .title .select-list a { font-size: 0.6em; padding: 0 5px; }
.module .title .select-list .first { border-left: 1px solid transparent; padding-left: 0; }
.module .title .select-list .selected { color: Black !important; }
.module .info { padding: 0px 10px; position: relative; overflow: hidden; padding-bottom: 10px; cursor: default; }
.module .info .slide-tab { width: 5000px; position: relative; }
.module .edit-toolbar { position: absolute; top: 5px; right: 2px; }
.module .edit-button, .module .delete-button { display: none; float: left; width: 20px; height: 20px; background-position: 2px 2px; background-repeat:no-repeat; border: 1px solid transparent; cursor: pointer; }
.module:hover .edit-button, .module:hover .delete-button { display: block; }
.module .edit-button:hover, .module .delete-button:hover { border-color: Silver; }
.module .edit-button { background-image: url("Images/edit.png"); }
.module .delete-button { background-image: url("Images/delete.png"); }

/* CSS for specific Modules */
#lastest-entry .category { display: none; left: 0; top: 0; }
#lastest-entry .entry { margin-bottom: 10px; }
#lastest-entry .entry .title { font-size: 1.3em; font-weight: bold; padding-left: 0;}
#lastest-entry .entry .title a { text-decoration: none; }
#lastest-entry .entry .title .date { font-size: 0.6em; }
#lastest-entry .main-entry .content { text-align: justify; }
#bookmark a:hover { text-decoration: underline; }
#friend-list .info .person { width: 85px; height: 110px; padding: 5px; float: left; text-align: center; cursor: pointer; }
#friend-list .info .person img { width: 85px; height: 85px; border: 1px solid Silver; }
#friend-list .info .person .name { padding-bottom: 10px; }
#friend-list .info .person .detail { display: none; }
#friend-list .info .person .link { display: none; }

/*** ThaoNX ***/ 
/*Entry*/
#frm_entry label	
{
    color: #DDD;
    font-size  :16pt;
}
#frm_entry input,#frm_entry select
{

/*	position:absolute;*/
    /*left:100px;*/
	font-size: 13pt;
}
#frm_entry input[name='entry_date']{
	width: 258px;
}
#frm_entry input[name='entry_title']{
	width: 500px;
}
#frm_entry select[name='entry_category']{
	width: 180px;
}
#frm_entry div{
	margin-bottom:15px;
}
#frm_entry span.error-tip{
	color:red
}

#frm_entry #cke_textarea_id{
	margin-top:15px;
}
#frm_entry #btn_add_category{
	background-image: url("Images/add.png");
	background-repeat: no-repeat;
	background-position: 12px 13px;
	padding-top: 17px;
	padding-right: 23px;
	padding-left: 15px;
	padding-bottom: 15px;
}
#entry_title{
	width:80%

}

.photo-setting{width:100px;height:100px;float: left;margin:4px;padding:5px;border:2px solid black;}
.click-effect{background:black;Filter:Alpha(Opacity=50); }


#mask {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.5;
	z-index: 999;
}
/* My Popup  */
.my-popup{
	display:none;
	background: #333;
	padding: 10px; 	
	border: 2px solid #ddd;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 0%; left: 0%;
	z-index: 99999;
	/*overflow-y:scroll;*/
	box-shadow: 0px 0px 20px #999; /* CSS3 */
        -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
        -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
	border-radius:3px 3px 3px 3px;
        -moz-border-radius: 3px; /* Firefox */
        -webkit-border-radius: 3px; /* Safari, Chrome */
}
.my-popup  a.close_pop{ 
	background-image: url("Images/close_pop.png");
	background-repeat: no-repeat;
	background-position: 0px 1px;
	padding-top: 17px;
	padding-right: 15px;
	padding-left: 15px;
}
.my-popup  a.close_pop{ 
	background-image: url("Images/close_pop.png");
	background-repeat: no-repeat;
	background-position: 0px 1px;
	padding-top: 17px;
	padding-right: 15px;
	padding-left: 15px;
}

>>>>>>> .r58
